<template>
  <div>
    <!-- 头像资料区域 -->
    <div class="profile-box">
      <!-- 头像 -->
      <van-image :src="$store.state.userInfo.photo" round fit="cover" />
      <!-- 资料 -->
      <div class="info-box">
        <h4 class="name">{{ $store.state.userInfo.name }}</h4>
        <span>{{ $store.state.userInfo.birthday }}</span>
      </div>
    </div>

    <!-- 快捷工具区域 -->
    <van-row>
      <van-col span="8">
        <van-icon color="#3296fa" name="newspaper-o" />
        我的作品
      </van-col>
      <van-col span="8">
        <van-icon color="#f00" name="star-o" />
        我的收藏
      </van-col>
      <van-col span="8">
        <van-icon color="orange" name="tosend" />
        阅读历史
      </van-col>
    </van-row>

    <!-- 四个cell -->
    <van-cell-group>
      <van-cell to="/mine/edit" icon="edit" title="编辑资料" is-link />
      <van-cell to="/mine/chat" icon="chat-o" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell @click="$store.commit('logout')" icon="info-o" title="退出设置" is-link />
    </van-cell-group>
  </div>
</template>

<script>

export default {

  async created () {
  
    // 调用vuex里actions方法发请求获取用户信息
    // 存到vuex里
    this.$store.dispatch('reqUserInfo')
  },
};
</script>


<style lang="less" scoped>
.profile-box {
  // 在less里声明一个变量，变量的值是这种蓝色
  @bgc: #3296fa;
  height: 140px;
  background-color: @bgc;
  display: flex;
  align-items: center;

  // vant里的组件标签叫什么，就有一个跟标签名一样的类，方便你去写样式
  .van-image {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 10px;
  }

  .info-box {
    color: #fff;
    h4 {
      font-size: 18px;
      margin-bottom: 10px;
    }
    span {
      color: @bgc;
      background-color: #fff;
      padding: 5px;
      font-size: 17px;
    }
  }
}

.van-row {
  .van-col {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .van-icon {
      font-size: 30px;
      margin-bottom: 3px;
    }
  }
}
</style>